
<template>
  <div class="newApp">
    <div class="enemyinfo">
      <div class="Item">
        <van-image round width="4rem" class="img" height="4rem" :src="getImageUrlItem" />
        <div class="ItemRight">
          <div class="ItemName">{{ monsterInfo.name }}</div>
          <div class="ItemHp">
            <van-row gutter="20"><van-col :span="2">HP </van-col><van-col :span="14"><a-progress :percent="monsterpercent"
                  strokeColor="#ee0a24" :show-info="false" /></van-col>
              <van-col :span="6"><span>{{ monsterHP }}/{{ monsterInfo.HP }}</span></van-col>
            </van-row>
          </div>
          <div class="ItemSp">
            <van-row gutter="20"><van-col :span="2">SP </van-col><van-col :span="14"><a-progress
                  :percent="monsterpercentsp" strokeColor="#1890FF" :show-info="false" /> </van-col><van-col
                :span="6"><span>{{ monsterSP }}/{{ monsterInfo.Mana }}</span></van-col></van-row>
          </div>
          <!-- 攻击:{{ monsterInfo.aggressivity }} 防御:{{ monsterInfo.defense }}攻速{{
            monsterInfo.speed
          }} -->
        </div>
      </div>
    </div>
    <div>
      <animation :userList="userList1" v-if="userList1.length > 0"></animation>
      <animation2 :userList2="userList2" v-if="userList2.length > 0"></animation2>
    </div>
    <div class="userInfo">
      <div class="Item">
        <van-image round width="4rem" class="img" height="4rem" :src="getImageUrl" />
        <div class="ItemRight">
          <div class="ItemName">{{ userInfo.name }}</div>
          <div class="ItemHp">
            <van-row gutter="20"><van-col :span="2">HP </van-col><van-col :span="14"><a-progress :percent="usepercent"
                  strokeColor="#ee0a24" :show-info="false" /></van-col>
              <van-col :span="6"><span>{{ userHP }}/{{ userInfo.HP }}</span></van-col>
            </van-row>
          </div>
          <div class="ItemSp">
            <van-row gutter="20"><van-col :span="2">SP </van-col><van-col :span="14"><a-progress :percent="usepercentsp"
                  strokeColor="#1890FF" :show-info="false" /> </van-col><van-col :span="6"><span>{{ userSP }}/{{
                    userInfo.Mana }}</span></van-col></van-row>
          </div>
          <!-- 攻击:{{ userInfo.aggressivity }} 防御:{{ userInfo.defense }}攻速{{ userInfo.speed }} -->
        </div>
      </div>
    </div>
  </div>
</template>
<script setup  lang="ts" >
import { getAssetURL, equipFindOne, getRealm, getMonsterOne } from '@/utils/index.ts'
import { useWinSize } from '@/utils/win.ts'
import { ref, defineProps, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import animation from './animation.vue'
import animation2 from './animation2.vue'
const getImageUrl = ref('')
const getImageUrlItem = ref('')
const size = useWinSize()
const userInfo = <object>ref({})
interface MonsterData {
  name?: String
  aggressivity?: String
  HP?: String
  defense?: String
  Mana?: String
  speed?: String
  fortune?: String
  Skills?: String
}
const monsterInfo = <MonsterData>ref({})
const route = useRoute()
//技能相关
const userList1 = ref([])
const userList2 = ref(['太极剑法', '万兽奔腾'])
//血量相关
const monsterHP = ref('')
const monsterSP = ref('')
const userHP = ref('')
const userSP = ref('')
// 血量比例
const monsterpercent = ref(100)
const usepercent = ref(100)
const monsterpercentsp = ref(100)
const usepercentsp = ref(100)
// 创建响应式的战斗频率变量
const battleFrequency = ref(0)
// 创建定时器
let intervalId
onMounted(() => {
  getImageUrl.value = getAssetURL('user/4.jpg')
  getImageUrlItem.value = getAssetURL('monster/item_01.jpg')
  userInfo.value = JSON.parse(localStorage.getItem('user-info'))
  userHP.value = userInfo.value.HP
  userSP.value = userInfo.value.Mana
  getMonster()
})
function getMonster() {
  const mapId = route.query.mapId
  console.log(mapId, 'mapId')
  let data = getMonsterOne(mapId)
  console.log(data.Skills)
  if (data) {
    userList1.value = data.Skills
    monsterInfo.value = data
    monsterHP.value = monsterInfo.value.HP
    monsterSP.value = monsterInfo.value.Mana
    //开始战斗
    startBattle()
  }
}
const startBattle = () => {

  intervalId = setInterval(() => {
    battleFrequency.value++ // 模拟战斗频率，实际应用中可以编写战斗逻辑
    //最大血量相关
    // monsterHP.value = String(Number(monsterSP.value) - 20)
    // monsterSP.value = String(Number(monsterSP.value) - 20)
    // userHP.value = String(Number(monsterSP.value) - 20)
    // userSP.value = String(Number(monsterSP.value) - 20)
    // // 即时血量相关
    // const monsterpercent = <number>ref(100)
    // const usepercent = <number>ref(100)
    // const monsterpercentsp = <number>ref(100)
    // const usepercentsp = <number>ref(100)
  }, 1000); // 1000毫秒，即1秒
}
</script>
<style lang="scss" scoped>
.enemyinfo {
  background: #fff;
  margin: 10px;
  border-radius: 10px;
  @extend %newApp;
}

.userInfo {
  position: fixed;
  /* width: 100%; */
  bottom: 10px;
  right: 0px;
  padding: 10px;
  left: 0px;
  background: #fff;
  margin: 10px;
  border-radius: 10px;
  @extend %newApp;
}

%newApp {
  .Item {
    display: flex;
    align-items: center;
  }

  .ItemRight {
    padding-left: 10px;
    width: 80%;
  }

  .ItemName {
    font-size: 18px;
    color: #1890ff;
  }

  .ItemHp {
    color: #ee0a24;
    font-size: 18px;
  }

  .ItemSp {
    font-size: 18px;
    color: #1f74fc;
  }
}

@keyframes shake {
  0% {
    transform: translate(0, 0);
  }

  10% {
    transform: translate(-3px, 0);
  }

  20% {
    transform: translate(3px, 0);
  }

  30% {
    transform: translate(-3px, 0);
  }

  40% {
    transform: translate(3px, 0);
  }

  50% {
    transform: translate(-3px, 0);
  }

  60% {
    transform: translate(3px, 0);
  }

  70% {
    transform: translate(-3px, 0);
  }

  80% {
    transform: translate(3px, 0);
  }

  90% {
    transform: translate(-3px, 0);
  }

  100% {
    transform: translate(0, 0);
  }
}

.img {
  animation: shake 5s infinite;
}

.check {
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
}
</style>